<!DOCTYPE html>
<html lang="zh">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="robots" content="noindex, nofollow">

    <title>登录界面</title>
    <link href="/css/login.css" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet"/>
    <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
</head>

<body>
<div class="login-content">
    <div class="box">
        <div class="box-container">
            <div>
                <p class="application-name" style="margin-left: 70px">健康上报系统登录界面</p>
            </div>
            <div>
                <form id="kc-form-login" class="form" action="/login" method="post">
<!--                    <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>-->

                    <label for="username"></label><input id="username" class="login-field" placeholder="用户名" type="text"
                                                         name="username" tabindex="1">
                    <div>
                        <label class="visibility" id="v"><img id="vi" src="/img/eye-off.png" alt="eye"></label>
                    </div>
                    <label for="password"></label><input id="password" class="login-field" placeholder="密码"
                                                         type="password" name="password" tabindex="2">
                    <input id="ticket" name="ticket" type="hidden" value="">
                    <input id="randStr" name="randStr" type="hidden" value="">
                    <button type="button" class="submit" onclick='subForm()'>登录</button>
                </form>
            </div>
            <div>
                <p class="copyright">&nbsp;</p>
            </div>
        </div>
    </div>
</div>
<script>
    document.getElementById("v").addEventListener("click", () => {
        const x = document.getElementById("password");
        const v = document.getElementById("vi");
        if (x.type === "password") {
            x.type = "text";
            v.src = "/img/eye.png";
        } else {
            x.type = "password";
            v.src = "/img/eye-off.png";
        }
    });
    function subForm(){
        var checkUserName = document.getElementById("username").value;
        var checkPassword = document.getElementById("password").value;
        if(checkUserName == ''){
            alert("请先输入用户名！");
        }else if(checkPassword == ''){
            alert("请输入密码！")
        }else{
            var captcha = new TencentCaptcha('2020532152', function (res) {
                if (res.ret === 0) {
                    var form = document.getElementById('kc-form-login');
                    var ticketInput = document.getElementById("ticket");
                    var randstrInput = document.getElementById("randStr");
                    ticketInput.value = res.ticket;
                    randstrInput.value = res.randstr;
                    form.submit();
                }
                else
                {
                    alert("验证失败");
                }
            });
            // 显示验证码
            captcha.show();
        }
    }

</script>
</body>
</html>